<#macro layout scripts styles module title basePath="${basePath}">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${platform}-${title}</title>
<link rel="stylesheet" type="text/css" href="${basePath}static/css/css.css">
<style>
/*------------------------- 登录 start -------------------------*/

/*.login-header,
.login-body,
.int-user,
.int-password,
.int-yzm,
.login-code,
.btn-login,
.btn-downlode{ background:url(${basePath}static/img/index/login-sprite.png) no-repeat;}*/
.login-body{ background:url(${basePath}static/img/index/login-sprite.png) no-repeat;}
.login-header{background-position:0 -440px;}
.login-body{ background-position:0 0;}
.int-user{/*background-position:0 -573px;*/ margin: 1px 0; height:73px;int-passwordpx;width:313px;padding-right:10px;line-height:60px;}
.int-password{background-position:0 -647px;margin-bottom:1px;height:73px;width:313px;padding-right:10px;line-height:60px;}
.int-yzm{background-position:0 -721px;height:72px;width:183px; padding-right:10px;line-height:60px;}
.login-code{background-position:-283px -721px;;height:74px;width:131px;}
.btn-login{margin-left:0px !important;background:url(${basePath}static/img/index/login-sprite.png) 0 -795px;height:60px;width:390px;}
.btn-login:hover{background:url(${basePath}static/img/index/login-sprite.png) 0 -855px;}
/*login-header*/
.login-header{ width:409px; height:132px; margin:0 auto; text-align:center;}
.login-header a{ margin-top:10px; display:inline-block;}
.login-header h2{font:normal 18px/36px "微软雅黑";color:#ffbf00; letter-spacing:3px;}
/*login-body*/

.login-body{ width:542px; height:440px;margin:20px auto; padding:93px 64px 0 64px;}
.login-body input{ border: none; margin-left:100px; font-size:18px;color:#979797;}
.input-box{ position:relative; z-index:10;}
.login-code{ position:absolute; top:148px; right:0; text-align:center; padding-top:8px; z-index:20;}
.login-code a{color:#613a00; display:block; font-size:14px; line-height:18px;margin-top:-20px;}
.login-code img{ width:114px; height:38px;}
.login-btn{ margin-top:20px;}
.login-btn a{ display:block; text-align:center; font-size:14px; color:#979797; letter-spacing:2px; margin-top:5px;}
/*login-footer*/
.login-footer{ height:54px;color:#888b8d; line-height:24px;text-align:center; letter-spacing:1px;}
.login-footer a{color:#888b8d; }
.login-footer span{margin:0 15px;color:#3e454c;}

.error{color:red;}
/*input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill (background:#f00;)*/
input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset;
    }
    
.form_bg{height:222px;background: url(${basePath}static/img/index/login-sprite.png)  0px -573px no-repeat ;}
/*------------------------- 登录 end -------------------------*/
</style>

</head>

<body>
<div class="login-header">
	<a href="#"><img src="${basePath}static/img/index/login-logo.png" /></a>
	<h2>竭诚为客户提供更好的购彩体验</h2>
</div><!-- /login-header -->
<div class="login-body">
	<div class="input-box" id="login-area">
		<form action="login" method="post" id="loginForm" name="loginForm" class="clearform form_bg" >
		<input id="username" name="username" type="text" class="int-user clear" value="" data-placeholder="输入用户名" />
		<input id="password" name="password" type="password"  class="int-password clear" value="" />
		<input id="jcaptchaCode" name="jcaptchaCode" type="text" autocomplete="off" class="int-yzm clear" data-placeholder="输入验证码" />
		</form>
		<div class="login-code int-yzm clear">
			<img class="jcaptcha-btn jcaptcha-img" src="${basePath}jcaptcha.jpg" btitle="点击更换验证码" />
			<a class="jcaptcha-btn" href="javascript:;">换一张</a>
		</div>
		<span class="error" id="errorMessage">${error}</span>
	</div><!-- /input-box -->
	<div class="login-btn">
		<input type="button" class="btn-login fl" id="login-submit" />
	</div>
</div><!-- /login-body -->
<div class="login-footer">
	<p>2009-2015 © 联华娱乐 京ICP备19562186号 京公网安备110106327435号</p>
	<p>提醒：购买彩票有风险，在线投注需谨慎，不向未满18周岁的青少年出售彩票！</p>
</div>
<!-- /login-footer -->
<div class="scrollsidebar" id="scrollsidebar">
    <div class="side_content">
        <div class="side_list">
            <div class="side_title"><a title="隐藏" class="close_btn"><span>关闭</span></a></div>
            <div class="side_center">         
                <div class="kfrx mt10" style="cursor: pointer;">
                    <img src="${basePath}static/img/kf/ico-kefu1.png"  id="onlineCustomer" />
                    <p>联华娱乐</p>
                </div>
            </div>
            <div class="side_bottom"></div>
        </div>
    </div>
    <div class="show_btn"><span>在线客服</span></div>
</div>
<!-- 代码 结束 -->
	<script>
		var _jquery_src = "";
		//ie11
		if((/Trident\/7\./).test(navigator.userAgent)){
			_jquery_src = "${basePath}static/js/lib/jquery-2.1.3.js";
		}else{
			_jquery_src = "${basePath}static/js/lib/jquery-1.10.2.js";
		}
		document.write("<script charset=\"UTF-8\" src='"+_jquery_src+"'><\/script>");
	</script>
	<script charset="UTF-8" src="${basePath}static/js/lib/common.js"></script>
	<script>
    
	;(function (){
		 var COOK_LOGIN_NAME="FRONT_LOGIN_NAME";
		var ERROR = {
			USER_NAME : {
				NULL  : '用户名不能为空',
				ERROR : '用户名格式错误'
			},
			PASSWORD  : {
				ERROR : '密码格式错误'
			},
			VERIFY_CODE : {
				NULL : '验证码不能为空',
				ERROR : '验证码格式错误'
			}
		}

		if($.cookie(COOK_LOGIN_NAME)){
			$('#login-area [name="username"]').val($.cookie(COOK_LOGIN_NAME));
		}else{
			$('#login-area [name="username"]').val('');
		}

		var fields = [{
			ele : $('#login-area [name="username"]'),
			checkHandler : function (){
				$('#errorMessage').html('');
				if($.trim(this.ele.val()) === '' || 
					this.ele.val() === this.ele.attr('data-placeholder')){
					return ERROR.USER_NAME.NULL;
				}else if(!$.check.isUserN(this.ele.val())){
					return ERROR.USER_NAME.ERROR;
				}else{
					return true;
				}
			}
		},{
			ele : $('#login-area [name="password"]'),
			checkHandler : function (){
				if(this.ele.val() === this.ele.attr('data-placeholder') || 
					!$.check.isPwd(this.ele.val())){
					return ERROR.PASSWORD.ERROR;
				}else{
					return true;
				}
			}
		},{
			ele : $('#login-area [name="jcaptchaCode"]'),
			checkHandler : function (){
				if($.trim(this.ele.val()) === '' || 
					this.ele.val() === this.ele.attr('data-placeholder')){
					return ERROR.VERIFY_CODE.NULL;
				}else if(!/^[0-9a-zA-Z]{4,6}$/.test(this.ele.val())){
					return ERROR.VERIFY_CODE.ERROR;
				}else{
					return true;
				}
			}
		}];

		var login_check = function (){
			$('#errorMessage').html('');
			var user_name = $('#login-area [name="username"]');
			var password = $('#login-area [name="password"]');
			var verifyCode = $('#login-area [name="jcaptchaCode"]');
			if($.trim(user_name.val()) === '' || 
				user_name.val() === user_name.attr('data-placeholder')){
				user_name.focus();
				user_name.bind('keydown.login' , function(){
				 	$.validation.init(fields);
				});
				return {
					ele : user_name,
					error : ERROR.USER_NAME.NULL
				};
			}else if(!$.check.isUserN(user_name.val())){
				user_name.focus();
				user_name.bind('keydown.login' , function(){
				 	$.validation.init(fields);
				});
				return {
					ele : user_name,
					error : ERROR.USER_NAME.ERROR
				};
			}

			if(password.val() === password.attr('data-placeholder') || 
				!$.check.isPwd(password.val())){
				password.focus();
				password.bind('keydown.login' , function(){
				 	$.validation.init(fields);
				});
				return {
					ele : password,
					error : ERROR.PASSWORD.ERROR
				};
			}

			if($.trim(verifyCode.val()) === '' || 
				verifyCode.val() === verifyCode.attr('data-placeholder')){
				verifyCode.focus();
				verifyCode.bind('keydown.login' , function(){
				 	$.validation.init(fields);
				});
				return {
					ele : verifyCode,
					error : ERROR.VERIFY_CODE.NULL
				};
			}else if(!/^[0-9a-zA-Z]{4,6}$/.test(verifyCode.val())){
				verifyCode.focus();
				verifyCode.bind('keydown.login' , function(){
				 	$.validation.init(fields);
				});
				return {
					ele : verifyCode,
					error : ERROR.VERIFY_CODE.ERROR
				};
			}

			return true;
		};

		var _submit_handler = function (){
			$('#login-area [name]').unbind('focus').unbind('blur');
			var loginCheck = login_check();
			if(loginCheck === true){
				$.cookie( COOK_LOGIN_NAME, $('#login-area [name="username"]').val(), { expires: 7 });
				$.placeholder.focusC();
				$('#loginForm')[0].submit();
				$.placeholder.blurC();
			}else{
				$.validation.errRender(false, loginCheck['ele'][0] , loginCheck['error']);
			}
		}

		$(document).keydown(function (e){
			var e = e ? e :(window.event ? window.event : null); 
			window.setTimeout(function (){
				if(e.keyCode==13){
					_submit_handler();
				}
			},0);	
		});
		$('#login-submit').click(function (){
			window.setTimeout(function (){
				_submit_handler();
			},0);	
		});

		$(".jcaptcha-btn").click(function() {
            $(".jcaptcha-img").attr("src", '${basePath}jcaptcha.jpg?'+new Date().getTime());
        });

		$("#scrollsidebar").fix({
			direction : 'left',	//default.left or right
			minStatue : true,
			durationTime : 600
		});
		
		$.validation.init(fields);

		$.placeholder.init();
		
		jQuery("#onlineCustomer").click(function()
		 {
			window.open("http://tb.53kf.com/webCompany.php?arg=10093400&style=1","_blank");
		 }		
		);
	})();
</script>
	<#list scripts as script>
	<script src="${basePath}static/js/${script}.js"></script>
	</#list>
</body>

</html>
</#macro>
<@layout scripts=[] styles=[] module="index" title="登录"; basePath ></@layout>